import React,{Component} from 'react';
import styles from './index.scss';
import CSSModules from 'react-css-modules';
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
import {Picture} from "../../components";
import axios from 'axios';
import { connect} from 'react-redux';
var sexValue    = 1;
var detailsForm = {
    info    : '',
    sex     : '',
    birthday: '',

}
const mapStateToProps = state => {
    return {
      userpic: state.headpic.userpic,
    };
};
class Message extends Component{
    showValue=()=>{
        if(detailsForm){
            if(detailsForm.info==''||detailsForm.brithday==''){
                this.refs.warnInfo.style.display = "block";
            }else if(detailsForm.info!=''&&detailsForm.brithday!=''){
                this.refs.warnInfo.style.display    = "none";
                this.refs.successInfo.style.display = "block";
                axios({
                    url   : 'http://47.92.98.104:8080/zhuiying/edirUser',
                    method: 'post',
                    params: {
                        Uid     : 1,
                        info    : detailsForm.info,
                        sex     : detailsForm.sex,
                        birthday: detailsForm.brithday,
                        image   : this.props.userpic
                    }
                })
                setTimeout(()=>{
                    this.refs.successInfo.style.display = "none";
                },2000)
            }
        }
    }
    componentWillMount(){
        axios({
            url   : 'http://47.92.98.104:8080/zhuiying/getUser?Uid=1',
            method: 'get',
        }).then(res=>{
            document.getElementById('user_num').innerHTML = res.data.UserName;
        })
    }
    changeDate=(event)=>{
        detailsForm.info     = document.getElementById('exampleText').value;
        detailsForm.sex      = sexValue;
        detailsForm.birthday = event.target.value;
        console.log(typeof( detailsForm.birthday))
    }
    changeText=(event)=>{
        detailsForm.info     = event.target.value;
        detailsForm.sex      = sexValue;
        detailsForm.birthday = document.getElementById('exampleDate').value;
    }
    changeSex1=(event)=>{
        sexValue             = 1;
        detailsForm.info     = document.getElementById('exampleText').value;
        detailsForm.sex      = sexValue;
        detailsForm.birthday = document.getElementById('exampleDate').value;
    }
    changeSex0=(event)=>{
        sexValue             = 0;
        detailsForm.info     = document.getElementById('exampleText').value;
        detailsForm.sex      = sexValue;
        detailsForm.birthday = document.getElementById('exampleDate').value;
    }
    render(){
        return(
            <div styleName="details_mesg subdetails">
            {/* <div styleName="head_pic clearfix">
                <div styleName="choose_pic">
                <div styleName="choosebg"></div>
                <p>选择图片</p>
                </div>
                <div styleName="current_pic"><div styleName="currentbg"></div><p>当前图像</p></div>
            </div>
            <p styleName="pictext">请选择图片上传: 支持jpg, png等格式, 图片需小于2M</p>
        <a href="javascript:void(0);" styleName="updatepic">更新</a> */}
                <Picture/>
              <Form styleName="user_form">
                <p styleName="user_name">用户名：<span styleName="user_num" id="user_num">1234567890</span></p>
                <FormGroup row>
                <Label for="exampleText" sm={{size:2,offset:1}}>我的签名: </Label>
                <Col sm={8}>
                    <Input type="textarea" name="text" id="exampleText" onChange={this.changeText} placeholder="请填写个性签名"/>
                </Col>
                </FormGroup>
                <FormGroup tag="fieldset">
                    <span styleName="sexual">性别: </span>
                    <FormGroup check inline>
                        <Label check>
                        <Input type="radio" name="sex" onChange={this.changeSex1} checked/>{'男'}
                        </Label>
                    </FormGroup>
                    <FormGroup check inline>
                        <Label check>
                        <Input type="radio" name="sex" onChange={this.changeSex0} />{'女'}
                        </Label>
                    </FormGroup>
                </FormGroup>
                <FormGroup row>
                <Label for="exampleDate" sm={{size:2,offset:1}}>出生日期: </Label>
                <Col sm={5}>
                    <Input type="date" name="date" id="exampleDate" ref="birthday" onChange={this.changeDate}/>
                </Col>
                </FormGroup>
                <FormGroup check row>
                <p styleName="warnInfo" ref="warnInfo">请将个人信息填写完整</p>
                <p styleName="successInfo" ref="successInfo">提交成功</p>
                <Col sm={{ size: 4, offset: 5 }}>
                    <Button styleName="user_submit" onClick={this.showValue}>提交</Button>
                </Col>
                </FormGroup>
        </Form>
        </div>
        )
    }
}
const MyMessage = CSSModules(Message, styles,{allowMultiple:true});
export default connect(mapStateToProps)(MyMessage);
